<template>
	<view style="height: 100%;">
		<view v-if="access_token">
			<web-view :src="`https://wxapi.agri120.org/h5player/webplayer.html?access_token=${access_token}&id=${select_dev.id}&title=${select_dev.name}`" @message="message"></web-view>
			<!-- <web-view :src="`/static/h5player/webplayer.html?access_token=${access_token}&id=${select_dev.id}&title=${select_dev.name}`" @message="message"></web-view> -->
			<!-- <web-view :src="`/static/h5player/webplayer.html?playUrl=${playUrl}&title=${select_dev.name}`" @message="message"></web-view> -->
			
			
			<!-- #ifndef APP-PLUS -->
			<!-- <web-view :src="`https://wxapi.agri120.org/h5player/webplayer.html?playUrl=${playUrl}&title=${select_dev.name}&id=${select_dev.id}`" @message="message"></web-view> -->
			<!-- #endif -->
		</view>
		<view v-if="isErr" style="display: flex;align-items: flex-end;height: 100%;">
			<button type="primary" :loading="loading" @click="getPlayUrl" style="width: 150px;height: 45px;margin: auto;font-size: 16px;border-radius: 10px;line-height: 45px;margin-bottom: 40px;">重新获取</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				webview_url: '',
				playUrl: '',
				loading: false,
				isErr: false,
				select_dev: {},
				access_token:'',
				params: {
					cameraIndexCode: '',
					command: '',
					action: 0, //1停止
					speed: 15,
					presetIndex: '10'
				}
			}
		},
		async onLoad(params) {
			// this.dev_type = params.dev_type;
			this.select_dev.name = params.dev_name;
			this.select_dev.id = params.dev_id;
			// this.select_dev.status = 1; //params.onlinestatus;
			// this.select_dev.fwq_type = params.fwq_type;
			// this.select_dev.typeid = params.typeid;

			// this.webview_url = `/static/h5player/webplayer.html`;

			// try {
			this.getPlayUrl();
			// } catch (e) {
			// 	console.log('获取播放地址err', e);
			// }
			

		},

		methods: {
			message(data) {
				// { operate, action }
				let params = data.detail.data[0];
				console.log('接受', params);

				this.controlling(params);
			},
			stopControlling() {
				this.$api.tool_api.videoControl_1({
					action: 1,
					cameraIndexCode: this.select_dev.id,
					command: 'GOTO_PRESET',
					presetIndex: '10'
				}).then((res) => {
					console.log('停止', res);
				})
				// .catch(() => {
				// 	uni.showToast({
				// 		title: '失败'
				// 	});
				// 	this.touch_gif_show = false;
				// });
			},
			controlling(opt) {
				let params = Object.assign({}, this.params, opt, { cameraIndexCode: this.select_dev.id });
				console.log('controlling-params', params);
				return new Promise((resolve, reject) => {
					this.$api.tool_api.videoControl_1(params).then((res) => {
						resolve(res);
						console.log('controlling-res', res);
					}).catch(err => {
						reject(err)
					})
				})
			},
			getJkKey() {
				return new Promise((resolve, reject) => {
					this.$api.tool_api.getJkKey({
						appid: this.appid,
						token: this.token
					}).then(res => {
						// reject('qqqq')
						console.log('jkkey', res);
						if (res.data.ret == 1000) {
							resolve(res.data.data);
						} else {
							reject('getJkKey' + res.data.message);
						}
					}).catch(err => {
						reject(err);
					});
				})
			},
			getJkToken({ key, Secret }) {
				return new Promise((resolve, reject) => {
					this.$api.tool_api.getJkToken({
						"appKey": key,
						"appSecret": Secret
					}).then(res => {
						console.log('jktoken', res,key,Secret);
						if (res.data.code === '0') {
							let access_token = res.data.data.access_token;
							this.access_token = access_token;
							uni.setStorageSync('access_token', access_token);
							resolve(res.data.data.access_token);
						} else {
							reject('getJktoken' + res.data.msg);
						}
					}).catch(err => {
						reject(err);
					});
				})
			},
			previewURLs() {
				return new Promise((resolve, reject) => {
					// console.log('previewUrls', res.data);
					// this.playUrl = res.data.data.url;
					this.$api.tool_api.previewURLs({
						cameraIndexCode: this.select_dev.id,
						protocol: 'ws'
					}).then(res => {
						console.log('previewURLs', res);
						if (res.data.code === '0') {
							let url = res.data.data.url;
							this.isErr = false;
							this.playUrl = url;
							resolve(url);
						} else {
							reject('previewURLs' + res.data.msg);
						}
					}).catch(err => {
						reject(err);
					});
				})
			},
			async getPlayUrl() {
				if (this.loading) return
				this.loading = true;
				// #ifndef APP-PLUS
				uni.showLoading({
					// title: '设备连接中...'
				});
				// #endif
				// #ifdef APP-PLUS
				// _this.waiting =
				let waiting = plus.nativeUI.showWaiting('', {
					width: '120px',
					height: '120px',
					color: '#fff',
					modal: false,
					back: 'transmit',
					background: 'rgba(0,0,0,0.3)'
				});
				//手动关闭弹窗  返回
				// _this.waiting.onclose = _this.onclose;
				// #endif

				try {
					let { key, Secret } = await this.getJkKey();
					await this.getJkToken({ key, Secret });
					// await this.previewURLs();
					this.hidePopup();
				} catch (e) {
					console.log('eee', e);
					//TODO handle the exception
					this.isErr = true;
					this.hidePopup();
					uni.showModal({
						title: '错误信息',
						content: e,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				this.loading = false;
				// let res = await this.$api.tool_api.previewURLs({
				// 	cameraIndexCode: this.select_dev.id,
				// 	protocol: 'ws'
				// })
				// console.log('previewUrls', res.data);
				// this.playUrl = res.data.data.url;
			},

			hidePopup() {
				// #ifdef APP-PLUS
				plus.nativeUI && plus.nativeUI.closeWaiting();
				// #endif
				// #ifndef APP-PLUS
				uni.hideLoading();
				// #endif
			}
		}
	}
</script>

<style>

</style>
